<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.con{
			width: 400px;
			height: 258px;
			position: relative;
			margin: 0px auto; /* 上下左右外边距都为0，auto会自动计算元素左右外边距的值，使元素水平居中 */ 
		}	
		.con:hover::before{/* 在前方追加元素*/
		content: "维护国家领土完整";
			border:#000000 50px solid;
			position: absolute;
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			text-align: center;
			color: red;
			font-size: 32px;
			border-image: url(img/china.png) 50 50 50 50 round;
		}
			
		</style>
	</head>
	<body>
		<!-- .con>img -->
		<div class="con">
			
			<!-- 追加元素的插入位置 -->
			<img src="img/fish.jpg" alt=""></div>
	</body>
</html>